<template>
  <!-- 客户对账单的详情页,可以在这里创建对账单 -->
  <div>
    <div class="detailContainer" v-show="checkType !== 'add'">
      <div class="searchContainer">
        <el-form ref="form" :model="searchData" :inline="true">
          <el-form-item label="客户名称" size="mini" style="width: 270px">
            <el-select
              disabled
              v-model="searchData.customer_id"
              style="width: 200px"
            >
              <el-option
                v-for="customer in customerList"
                :key="customer.id"
                :label="customer.name"
                :value="customer.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户所属区域" size="mini" style="width: 300px">
            <el-select
              disabled
              v-model="searchData.bigArea"
              style="width: 200px"
            >
              <el-option
                v-for="bigArea in bigAreaList"
                :key="bigArea.id"
                :label="bigArea.name"
                :value="bigArea.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单创建时间" size="mini" style="width: 320px">
            <el-date-picker
              v-model="searchData.createTime"
              value-format="timestamp"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 220px"
            />
          </el-form-item>
          <!-- 对账状态默认未对账 -->
          <el-form-item label="对账状态" size="mini" style="width: 240px">
            <el-select v-model="searchData.account_status" style="width: 170px">
              <el-option label="未对账" value="0" />
              <el-option label="已对账" value="1" />
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="运单号" size="mini" style="width: 275px">
            <el-input
              v-model="searchData.waybill_number"
              style="width: 215px"
            ></el-input>
          </el-form-item>
          <el-form-item label="运单状态" size="mini" style="width: 300px">
            <el-select v-model="searchData.waybill_status" style="width: 200px">
              <el-option
                v-for="item in OrderstatusType"
                :key="item.item_code"
                :label="item.item_name"
                :value="item.item_code"
              />
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchSenderCheckDetailList"
              >查询</el-button
            >
            <el-button plain icon="el-icon-refresh-left" @click="resettingData"
              >重置</el-button
            >
            <el-button
              plain
              icon="el-icon-d-arrow-left"
              @click="changeCustomerDetailPage(false)"
              >返回客户对账列表</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="operation">
        <el-button
          plain
          type="primary"
          @click="createCheckList"
          style="margin-left: 10px"
          data-tracker="P48-4"
          v-permission="'finance_customer_create'"
          >创建对账单</el-button
        >
        <el-tag style="margin-left: 10px"
          ><span>已对账合计：</span>
          <span>{{ alAccount ? alAccount : 0 }}，</span>
          <span>未对账合计：</span>
          <span>{{ noAccount ? noAccount : 0 }}</span>
        </el-tag>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :row-key="(item) => item.id"
        border
        align="center"
        @selection-change="handleSelectionChange"
        style="width: 100%"
        max-height="480px"
      >
        <el-table-column type="selection" width="45" :reserve-selection="true">
        </el-table-column>
        <el-table-column
          prop=""
          fixed
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column prop="waybill_no" fixed label="运单号" width="180">
          <template slot-scope="scope">
            <div
              style="cursor: pointer; color: blue"
              @click="handleJump(scope)"
            >
              {{ scope.row.waybill_no }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建订单时间" width="150">
          <template slot-scope="scope">
            {{
              new Date(Number(scope.row.create_time) * 1000)
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ")
            }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="对账状态" width="80">
          <template slot-scope="scope">
            {{ scope.row.status === "0" ? "未对账" : "已对账" }}
          </template>
        </el-table-column>
        <el-table-column prop="waybill_status" label="运单状态" width="80">
          <template slot-scope="scope">
            {{
              OrderstatusType.find(
                (item1) => item1.item_code == scope.row.waybill_status
              ).item_name
            }}
            <!-- {{scope.row.waybill_status}} -->
          </template>
        </el-table-column>
        <el-table-column prop="handler_name" label="经办人" width="80">
        </el-table-column>
        <el-table-column prop="total_freight_fee" label="总运费" width="150">
        </el-table-column>
        <el-table-column prop="freight_fee" label="运费" width="150">
        </el-table-column>
        <el-table-column prop="delivery_fee" label="送货费" width="150">
        </el-table-column>
        <el-table-column prop="pick_up_fee" label="提货费" width="150">
        </el-table-column>
        <el-table-column prop="handling_fee" label="装卸费" width="150">
        </el-table-column>
        <el-table-column prop="premium_fee" label="保价费" width="150">
        </el-table-column>
        <el-table-column prop="package_fee" label="包装费" width="150">
        </el-table-column>
        <el-table-column prop="other_fee" label="其他费用" width="150">
        </el-table-column>
      </el-table>
      <!-- <div class="cutPages">
        <el-pagination
          style="float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
        >
        </el-pagination>
      </div> -->
    </div>
    <div v-show="checkType === 'add'">
      <customerCheckDetail
        :closeCheckPage="closeCheckPage"
        :customer_id="customer_id"
        :bigArea="bigArea"
        :selectedDetails="selectedDetails"
        :createTime="searchData.createTime"
        :displayParentOrders="displayOrders"
      ></customerCheckDetail>
    </div>
  </div>
</template>

<script>
import customerCheckDetail from "./customerCheckDetail.vue";
import tableForm from "@/components/table/table";
import pagination from "@/components/pagination";
import { reqCustomerSDetailList } from "@/api/finance";
export default {
  name: "customerDetail",
  props: ["customer_id", "bigArea", "createTime", "changeCustomerDetailPage"],
  data() {
    return {
      customerList: [], //客户名称
      bigAreaList: [], //区域列表
      searchData: {
        customer_id: "", //客户id
        bigArea: "",
        createTime: [
          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30),
          new Date().getTime(),
        ], //创建时间
        account_status: "0", //对账状态,默认未对账
        waybill_number: "", //运单号
        waybill_status: "", //运单状态
      }, //查询条件
      alAccount: "", //已对账
      noAccount: "", //未对账
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // pageNum: 1, //目前在第几页
      // totalListNum: 10, //列表总数
      // pageSize: 10, //一页多少条
      //测试用
      tableData: [],
      selectedOrders: [], //选中的id
      selectedDetails: [], //选中的详细信息
      OrderstatusType: [
        {
          item_code: "0",
          item_name: "待揽收",
        },
        {
          item_code: "1",
          item_name: "揽收中",
        },
        {
          item_code: "2",
          item_name: "待创建干线",
        },
        {
          item_code: "3",
          item_name: "待发车",
        },
        {
          item_code: "4",
          item_name: "已发车",
        },
        {
          item_code: "5",
          item_name: "待配送",
        },
        {
          item_code: "6",
          item_name: "配送中",
        },
        {
          item_code: "7",
          item_name: "待签收",
        },
        {
          item_code: "8",
          item_name: "已签收",
        },
        {
          item_code: "9",
          item_name: "待回单签收",
        },
        {
          item_code: "10",
          item_name: "已完结",
        },
      ], //运单状态
    };
  },
  components: { tableForm, pagination, customerCheckDetail },
  mounted() {
    this.getCustomerList();
    this.getBigAreaList();
  },
  computed: {
    checkType() {
      return this.$store.getters.checkType;
    },
  },
  watch: {
    createTime() {
      this.searchData.createTime = this.createTime;
    },
    customer_id() {
      Object.assign(this.$data.searchData, this.$options.data().searchData);
      setTimeout(() => {
        this.searchData.customer_id = this.customer_id * 1;
        this.searchData.bigArea = this.bigArea * 1;
      }, 500);
      this.searchData.createTime = this.createTime;
      this.displayOrders();
    },
  },
  methods: {
    async displayOrders(id) {
      const { pageNum, pageSize, searchData } = this;
      let result = await reqCustomerSDetailList({
        customer_id: String(this.customer_id),
        waybill_no: String(searchData.waybill_number),
        status: searchData.account_status, //0是未对账,1是已对账,空是全部
        waybill_status: searchData.waybill_status, //运单状态
        start_time: String(parseInt(searchData.createTime[0] / 1000)),
        end_time: String(parseInt(searchData.createTime[1] / 1000)),
        // page: String(pageNum),
        // page_size: String(pageSize),
      });
      if (result.code === 10000) {
        this.tableData = result.data.data ? result.data.data.list : [];
        this.alAccount = result.data.data ? result.data.data.al_total : ""; //已对账
        this.noAccount = result.data.data ? result.data.data.un_total : ""; //未对账
        // this.pageNum = result.data.pagination.page * 1;
        // this.totalListNum = result.data.pagination.total * 1;
        // this.pageSize = result.data.pagination.page_size * 1;
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    resettingData() {
      Object.assign(this.$data.searchData, this.$options.data().searchData);
      this.searchData.createTime = this.createTime;
      this.displayOrders();
    },
    async handleJump(scope) {
      //跳转到对应运单详情
      const checkedOrder = scope.row;
      const { id } = checkedOrder;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    async getCustomerList() {
      setTimeout(() => {
        this.customerList = this.$store.getters.customerList;
      }, 1000);
    },
    async getBigAreaList() {
      setTimeout(() => {
        this.bigAreaList = this.$store.getters.websiteList;
      }, 1000);
    },
    searchSenderCheckDetailList() {
      //查询功能
      this.displayOrders();
    },
    createCheckList() {
      //创建对账单,判断一下所选订单的对账状态,已对过账的提醒一下
      if (this.selectedOrders.length !== 0) {
        if (
          this.selectedDetails.every(
            (item) => item.status === "0" //0是未对账
          )
        ) {
          this.$store.commit("CHANGE_CHECK_TYPE", "add");
        } else {
          this.$message({
            type: "error",
            message: "只能选择未对账的运单",
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "至少选择一个运单",
        });
      }
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.displayOrders();
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.displayOrders();
    },
    handleSelectionChange(checked) {
      this.selectedOrders = checked.map((item) => item.id); //取到id的集合
      this.selectedDetails = checked;
    },
    //关闭对账页面
    closeCheckPage() {
      this.$store.commit("CHANGE_CHECK_TYPE", "");
    },
  },
};
</script>

<style scoped lang="less">
.detailContainer {
  padding-left: 5px;
  background-color: #fff;
  .searchContainer {
    padding: 0 10px;
    border-bottom: 7px solid #e8f1f7;
    .el-form-item--mini.el-form-item {
      margin-bottom: 10px;
    }
  }
  .operation {
    padding-top: 10px;
    height: 40px;
    ::v-deep .el-pagination {
      float: right;
      .el-input--mini .el-input__inner {
        height: 24px;
      }
    }
    .el-tag {
      height: 30px;
      padding: 5px 30px;
      border-color: #92d6ff;
      background-color: #e6f7ff;
      span {
        font-weight: bold;
        color: black;
      }
    }
  }
  .cutPages {
    height: 40px;
  }
}
</style>